<template>
	<div id='tmpl'>
	<!-- 1.0轮播图 :mint-ui中的 swipe组件实现-->
		<mt-swipe :auto="4000">
		<!-- <mt-swipe-item>1</mt-swipe-item> -->
		<mt-swipe-item v-for='(item,index) in list' :key='index'>
			<img :src="item.img">
		</mt-swipe-item>
		</mt-swipe>
	<!-- 2.0利用MUI的9宫格样式实现导航的区域 -->
		<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to ='/news/newslist'>
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">新闻资讯</div>
		                </router-link>
		            </li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to ='/photo/photolist'>
		                    <span class="mui-icon mui-icon-email"></span>
		                    <div class="mui-media-body">图片分享</div>
		                </router-link>
					</li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to ='/goods/goodslist'>
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">商品购买</div>
		                </router-link>
					</li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to ='/feedback'>
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">留言反馈</div>
		                </router-link>
		            </li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to ='/vide'>
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">视频专区</div>
		                </router-link>
		            </li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to ='/callme'>
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">联系我们</div>
		                </router-link>
		            </li>
		        </ul> 
		</div>
	</div>
</template>

<script>
	import common from "../kits/common.js"
	// import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				list:[]
			}
		},
		created(){
			//当页面中的data和methods对象都创建完毕以后，就会自动调用created
			this.getimgs();
			// alert(111)
		},
		methods:{
			getimgs(){
				var url = common.apidomain + '/api/getlunbo';
				this.$http.get(url).then(function (res) {
					var data = res.body;
					console.log(res.body)
					if(data.status != 0){
						alert(data.message);	
						return;
					}
					this.list = data.message;
				})
			}
		}
	}
</script>

<style scoped>
	.mint-swipe {
		height: 200px;
	}
	.mint-swipe-item img {
		width: 100%;
	}
	.mint-swipe-item {
		width: 100%;
		height: 200px;
	}
	.mui-content,.mui-content ul {
		background-color: white;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: 0px;
	}
	.mui-grid-view.mui-grid-9 {
		border-top: 0px;
	}
	.mui-icon-home:before {
		content: '';
		display: inline-block;
		background-image: url('../../statics/imgs/1.png');
		width: 50px;
		height: 50px;
		background-repeat: round;	
	}
	.mui-icon-email:before {
		content: '';
		display: inline-block;
		background-image: url('../../statics/imgs/2.png');
		width: 50px;
		height: 50px;
		background-repeat: round;
	}
	.mui-icon-chatbubble:before {
		content: '';
		display: inline-block;
		background-image: url('../../statics/imgs/3.png');
		width: 50px;
		height: 50px;
		background-repeat: round;
	}
	.mui-icon-location:before {
		content: '';
		display: inline-block;
		background-image: url('../../statics/imgs/4.png');
		width: 50px;
		height: 50px;
		background-repeat: round;
	}
	.mui-icon-search:before {
		content: '';
		display: inline-block;
		background-image: url('../../statics/imgs/5.png');
		width: 50px;
		height: 50px;
		background-repeat: round;
	}
	.mui-icon-gear:before {
		content: '';
		display: inline-block;
		background-image: url('../../statics/imgs/6.png');
		width: 50px;
		height: 50px;
		background-repeat: round;
	}
</style>